<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>ECSHOP Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="../css/general.css" rel="stylesheet" type="text/css">
<script src="../js/jquery.js" type="text/javascript"></script>
<style type="text/css">
body{background: #80BDCB;}
#tabbar-div {background: #278296;padding-left: 10px;height: 21px;padding-top: 0px;}
#tabbar-div p {margin: 1px 0 0 0;}
.tab-front {background: #80BDCB;line-height: 20px;font-weight: bold;padding: 4px 15px 4px 18px;border-right: 2px solid #335b64;cursor: hand;cursor: pointer;}
.tab-back {color: #F4FAFB;line-height: 20px;padding: 4px 15px 4px 18px;cursor: hand;cursor: pointer;}
.tab-hover {color: #F4FAFB;line-height: 20px;padding: 4px 15px 4px 18px;cursor: hand;cursor: pointer;background: #2F9DB5;}
#top-div{padding: 3px 0 2px;background: #BBDDE5;margin: 5px;text-align: center;}
#main-div {border: 1px solid #345C65;padding: 5px;margin: 5px;background: #FFF;}
#menu-list {padding: 0;margin: 0;}
#menu-list ul {padding: 0;margin: 0;list-style-type: none;color: #335B64;}
#menu-list li {line-height: 16px;cursor: hand;cursor: pointer;}
#main-div a:visited, #menu-list a:link, #menu-list a:hover {color: #335B64text-decoration: none;}
#menu-list a:active {color: #EB8A3D;}
.explode {margin:2px 0 2px 0;padding:0;background: url(../images/menu_minus.gif) no-repeat 0px 3px;padding-left: 16px;font-weight: bold;line-height: 16px;}
.collapse {margin:2px 0 2px 0;padding:0;background: url(../images/menu_plus.gif) no-repeat 0px 3px;padding-left: 16px;font-weight: bold;line-height: 16px;}
.menu-item {background: url(../images/menu_arrow.gif) no-repeat 0px 3px;padding-left: 16px;margin-left: 16px;font-weight: normal;}
#help-title {font-size: 14px;color: #000080;margin: 5px 0;padding: 0px;}
#help-content {margin: 0;padding: 0;}
.tips {color: #CC0000;}
.link {color: #000099;}
</style>
</head>
<body style="cursor: auto;">
<div id="tabbar-div">
<p><span style="float:right; padding: 3px 5px;"><a href="javascript:toggleAll();"><img id="toggleImg" src="../images/menu_plus.gif" alt="展开" toggle='1'/></a></span>
  <span class="tab-front" id="menu-tab">菜单</span>
</p>
</div>
<div id="main-div">
<div id="menu-list">
<ul id="menu-ul">
<{section name=menu loop=$menus}>
   <li>
   <p  class="explode" name="menu"><{$menus[menu].action_name}></p>
    <ul>
    <{section name=child loop=$menus[menu].childs}>
    	<li class="menu-item"><a href="<{$menus[menu].childs[child].action_url}>" target="main"><{$menus[menu].childs[child].action_name}></a></li>
    <{/section}>
    </ul>
  </li>
<{/section}>
</ul>
</div>
</div>
<script type="text/javascript">
	$(function(){
		$('p[name=menu]').bind('click',toggleOne);
	});
	var toggleOne = function(){
		if($(this).hasClass('explode')){
			$(this).attr('class','collapse');
			$(this).next('ul').css('display','none');
		}else{
			$(this).attr('class','explode');
			$(this).next('ul').css('display','');
		}
	}
	function toggleAll(){
		var toggle = $('#toggleImg').attr('toggle');
		if(toggle == '1'){
			$('#toggleImg').attr('toggle','2');
			$('#toggleImg').attr('src','../images/menu_minus.gif');
			$('p[name=menu]').attr('class','explode');
			$('p[name=menu]').next('ul').css('display','');
		}else{
			$('#toggleImg').attr('toggle','1');
			$('#toggleImg').attr('src','../images/menu_plus.gif');
			$('p[name=menu]').attr('class','collapse');
			$('p[name=menu]').next('ul').css('display','none');
		}
	}
</script>
</body></html>